<template>
	<div>
		<div>
			<div style='background:#fff;padding:15px 40px;margin-bottom: 10px;'>
				<Breadcrumb>
			        <BreadcrumbItem @click.native='tables' href='/home/data/table'>数据表</BreadcrumbItem>
			        <BreadcrumbItem>{{currentTable}}</BreadcrumbItem>
			    </Breadcrumb>
			</div>
			<div>
				<div style='padding:10px 0;background: #fff'>
					<Tabs :value="tabShow" @on-click='changeTab'>
				        <TabPane label="选择数据" name="1"></TabPane>
				        <TabPane label="显示结构" name="2"></TabPane>
				        <!-- <TabPane label="修改表" name="3"></TabPane> -->
				        <TabPane :label="isEditdata?'编辑数据':'新建数据'" name="4"></TabPane>
				    </Tabs>
					<div style='display: flex;padding:20px 25px' 
					v-show='tabShow==1'>
						<div class='btns-wrap'>
							<div class='btns' :class='{"btns-selected":btnsIndex==1}' @click='btnSelect(1)'>选择</div>
							<div class='btns' :class='{"btns-selected":btnsIndex==2}' @click='btnSelect(2)'>搜索</div>
							<div class='btns' :class='{"btns-selected":btnsIndex==3}' @click='btnSelect(3)'>排序</div>
						</div>
						<!-- 选择数据 -->
						<div>
							<div style='display:flex;margin:2px 22px 5px 0;' v-show='btnsIndex==1' v-for='(item,index) in searchOptions.select' :key='item'>
								<Select style='margin-right: 15px' class='data-select' v-model='item.func' @on-change='selectArr'>
									<Option value="">请选择</Option>
	                                <OptionGroup label="函数">
	                                    <Option v-for="item in searchConfigData.functions" :value="item" :key="item">{{ item }}</Option>
	                                </OptionGroup>
	                                <OptionGroup label="集合">
	                                    <Option v-for="item in searchConfigData.grouping" :value="item" :key="item">{{ item }}</Option>
	                                </OptionGroup>
	                            </Select>
	                            <Select class='data-select' v-model='item.column' @on-change='selectArr'>
	                            	<Option value="" style='height:26px;line-height:15px'>请选择</Option>
	                                <Option v-for="item in searchConfigData.fields" :value="item.Field" :key="item.Field">{{ item.Field }}</Option>
	                            </Select>
							</div>
						</div>
						<!-- 搜索 -->
						<div>
							<div style='display:flex;margin:2px 22px 5px 0;' v-show='btnsIndex==2' v-for='(item,index) in searchOptions.where' :key='item'>
								<Select class='data-select' style='margin-right:16px' v-model='item.column' @on-change='whereArr'>
									<Option value="">请选择</Option>
	                                <Option v-for="item in searchConfigData.fields" :value="item.Field" :key="item.Field">{{ item.Field }}</Option>
	                            </Select>
	                            <Select class='data-select' style='margin-right:16px' v-model='item.func' @on-change='whereArr'>
	                                <Option v-for="item in searchConfigData.operators" :value="item" :key="item">{{ item }}</Option>
	                            </Select>
								<Input v-model='item.value' :icon="item.icon" @on-focus='showCloseicon(item)' @on-blur='hideCloseicon(item)' @on-click.native='clickCloseicon(index)' class='data-input'></Input>
							</div>
						</div>
						<!-- 排序 -->
						<div>
							<div style='display:flex;margin:2px 22px 5px 0;' v-show='btnsIndex==3' v-for='(item,index) in searchOptions.order' :key='index'>
								<div style='margin-right:16px'>
									<Select class='data-select' v-model='item.column' @on-change='orderArr'>
										<Option value="">请选择</Option>
		                                <Option v-for="item in searchConfigData.fields" :value="item.Field" :key="item.Field">{{ item.Field }}</Option>
		                            </Select>
								</div>
								<div>
									<div v-model='item.desc' class='data-checkbox' :class='{"data-checkbox-select":item.desc==1}' @click='orderDesc(item)'>
										<i class='iconfont icon-duigou' style='color:#fff;position:absolute;top:-5px' v-show='item.desc==1'></i>
									</div>
									<span style='font-size:17px;line-height:28px'>降序</span>
								</div>
							</div>
						</div>
						<div style='display:flex;margin-right:22px;margin-top:2px;'>
							<div style='display:flex;margin-right: 16px'>
								<div style='line-height:32px;margin-right:8px'>范围：</div>
								<input v-model='searchOptions.limit' type="text" name="" style='background-color:#f2f7fb;color:#464C5B;width:80px;height:28px;padding:0 6px'>
							</div>
							<!-- <div style='display:flex'>
								<div style='line-height:32px;margin-right:8px'>限制：</div>
								<input type="text" value='100' name="" style='background-color:#f2f7fb;color:#464C5B;width:80px;height:28px;padding:0 6px'>
							</div> -->
						</div>
						<div style='margin-top:2px'>
							<button class='btn-edit' style='width:64px;height:28px;line-height:28px' @click='selectBtn'>选择</button>
						</div>
					</div>
				</div>
				<div style='margin-top:16px;' v-show='tabShow==1'>
					<div style='position: relative'>
						<Table class="fn-table-wrap" :columns="selectTableList" :data="selectTableData" :show-header='showHeader' @on-selection-change='selectDataEdit' id='select-table' style='border:none' stripe></Table>
						<div style='width:100%;height:1px;background: #fff;position:absolute;bottom: 0px;z-index: 10'></div>
					</div>
			    	<div style='overflow: hidden;margin-top:24px'>
			    		<div style='float: left'>
			    			<button class='btn-edit' @click='editData'>编辑</button>
			    			<button class='btn-del' @click='deleteData'>删除</button>
			    		</div>
			    		<Page :current='selectTablePage.page' :total="selectTablePage.rowCount" :page-size='selectTablePage.pageSize' @on-change='selectTablePagination' style='float: right;margin: 20px 0;'></Page>
			    	</div>
				</div>
			</div>
			<!-- 显示结构 -->
			<div style='background: #fff' v-if='tabShow==2'>
				<div style='padding:0 20px 35px 20px'>
					<div style='padding:1px;margin-bottom: 24px'>
						<Table :columns="showTableList" :data="showTableData" id='showTable'></Table>
					</div>
					<div>
						<button class='btn-del' style='background-color:#fff;font-size:12px;' @click='addField'>添加字段</button>
					</div>
			    	<div>
			    		<div style='font-size:16px;margin: 16px 0'>索引</div>
			    		<div style='padding:1px'>
			    			<Table :columns="showIndexList" :data="showIndexData"></Table>
			    		</div>
			    		<!-- <div>
			    			<button class='btn-del' style='background-color:#fff;font-size:12px;margin-top:16px' @click='changeindex'>修改索引</button>
			    		</div> -->
			    	</div>
				</div>
			</div>
			<!-- 修改表 -->
			<!-- <div style='background: #fff' v-if='tabShow==3'>
				<div style='padding:0 20px 35px 20px'>
					<div style='display:flex'>
						<div style='font-size:16px'>表名：</div>
						<div>
							<Input v-model='formItem.table_name' class='data-input data-change-input' style='margin-right:16px'></Input>
						</div>
						<div>
							<Select v-model='formItem.engine' class='data-select data-change-select' style='margin-right:16px'>
								<Option value="0">(引擎)</Option>
	                            <Option v-for="item in tableConfigData.engines" :value="item" :key="item">{{ item }}</Option>
	                        </Select>
						</div>
                         <div>
                         	<Select v-model="formItem.collate" class='data-select data-change-select' style='margin-right:16px'>
                         		 <Option value="0">(校对)</Option>
	                            <OptionGroup :label="item.name" v-for='item in tableConfigData.collates' :key='item.name'>
	                                <Option v-for="sub in item.sub" :value="sub" :key="sub">{{ sub }}</Option>
	                            </OptionGroup>
	                        </Select>
                         </div>
						<div>
							<button class="btn-edit" style='width:60px;height:30px;line-height:30px;font-size:12px' @click='changeTableName'>保存</button>
						</div>
					</div>
					<div style='position: relative;top:30px'>
						<div style='padding:1px'>
							<Table :columns="changeTableList" :data="changeTableData" id='showTable'></Table>
						</div>
						<div style='width:100%;height:1px;background: #fff;position:absolute;bottom: 0px;z-index: 10'></div>
					</div>
			    	<div>
			    		<div style='display:flex'>
			    			<div style='font-size:16px'>自动增量：</div>
			    			<Input v-model='auto_increment' class='input-auto-increment'></Input>
			    			<div style='display:flex;margin:0 16px'>
			    				<div class='data-checkbox' :class='{"data-checkbox-select":is_default}' @click='isDefault'>
									<i class='iconfont icon-duigou' style='color:#fff;position:absolute;top:-3px' v-show='is_default'></i>
								</div>
								<div style='font-size:16px;line-height:28px'>默认值</div>
			    			</div>
							<div style='display:flex'>
								<div class='data-checkbox' :class='{"data-checkbox-select":is_comment}' @click='isComment'>
									<i class='iconfont icon-duigou' style='color:#fff;position:absolute;top:-3px' v-show='is_comment'></i>
								</div>
								<div style='font-size:16px;line-height:28px'>注释</div>
							</div>
			    		</div>
			    		<div style="margin-top:24px">
			    			<button class='btn-edit'>保存</button>
			    			<button class='btn-del' style='background:#fff'>删除</button>
			    		</div>
			    	</div>
				</div>
			</div> -->
			<!-- 新建数据 -->
			<div style='background: #fff' v-if='tabShow==4'>
				<div style='padding:0 20px 35px 20px'>
					<div style='padding:1px'>
						<Table :columns="newcolumns" :data="newdata" width='1000' border :show-header='false' id='diy-table'></Table>
					</div>
			    	<div style='overflow: hidden;margin-top:24px'>
			    		<div style='float:left'>
			    			<button class='btn-edit' @click='newdataSave(1)'>保存</button>
			    			<button class='btn-edit' style='width:150px' @click='newdataSave(2)'>{{selection.length ? '保存并继续编辑':'保存并插入下一个'}}</button>
			    		</div>
			    	</div>
				</div>
			</div>
		</div>
		<!-- 显示结构修改字段 -->
		<Modal v-model="modal" width="600">
            <p slot="header">
                <span>{{isAddField ? '添加字段' : '修改字段'}}</span>
            </p>
            <div>
                 <Form :label-width='80'>
                    <FormItem label='字段'>
                    	<p slot='label'><span class='star'>*</span>字段</p>
                        <Input v-model='columnData.Field' placeholder='请输入字段名'></Input>
                    </FormItem>
                    <FormItem label='类型'>
                    	<p slot='label'><span class='star'>*</span>类型</p>
                        <Select v-model="columnData.Type_index">
                            <OptionGroup :label="item.name" v-for='item in columnConfig.types' :key='item.name'>
                                <Option v-for="sub in item.sub" :value="sub" :key="sub">{{ sub }}</Option>
                            </OptionGroup>
                        </Select>
                    </FormItem>
                    <FormItem label='长度/值'>
                        <Input v-model='columnData.Type_length' placeholder=''></Input>
                    </FormItem>
                    <FormItem label='排序规则'>
                        <Select v-model="columnData.Collation">
                            <Option value="">请选择</Option>
                            <OptionGroup :label="item.name" v-for='item in columnConfig.collates' :key='item.name'>
                                <Option v-for="sub in item.sub" :value="sub" :key="sub">{{ sub }}</Option>
                            </OptionGroup>
                        </Select>
                    </FormItem>
                    <FormItem label='默认'>
                        <Input v-model='columnData.Default'></Input>
                    </FormItem>
                    <FormItem label='空'>
                        <Checkbox v-model='columnData.Null'></Checkbox >
                    </FormItem>
                     <FormItem label='注释'>
                        <Input v-model='columnData.Comment' ></Input>
                    </FormItem>
                    <FormItem label='移动字段'>
                        <Select v-model='columnData.after'>
                        	<Option value="">请选择</Option>
                        	<Option value="first">first</Option>
                            <Option v-for="item in columnConfig.fields" :value="item.Field" :key="item" :disabled='columnData.Field==item.Field'>{{ item.Field}} 之后</Option>
                        </Select>
                    </FormItem>
                </Form>
            </div>
            <div slot="footer">
                <button class='btn-cancel' @click="cancel">取消</button>
                <button class='btn-sure' @click="sure">确认</button>
            </div>
        </Modal>
        <!-- 编辑索引 -->
        <Modal v-model="index_modal" width="600">
            <p slot="header">
                <span>修改索引</span>
            </p>
            <div>
                 <Form :label-width='80'>
                    <FormItem label='索引类型'>
                    	<Select v-model="changeIndex.type">
                            <Option value="PRIMARY"></Option>
                            <Option value="UNIQUE"></Option>
                            <Option value="INDEX"></Option>
                        </Select>
                    </FormItem>
                    <FormItem label='列(长度)'>
                    	<div v-for='(item,index) in changeIndexSub' :key='index'>
                    		<Select v-model="item.name" style='width:70%;float:left;margin-bottom: 10px' @on-change='selectIndexType'>
                    			<Option value="">请选择</Option>
	                            <Option v-for="sub in showTableData" :value="sub.Field" :key="sub">{{ sub.Field }}</Option>
	                        </Select>
	                        <Input v-model='item.length' placeholder='长度' style='width:28%;float: right;margin-bottom: 10px'></Input>
	                        <!-- <InputNumber v-model='item.length' placeholder='' style='width:28%;float: right;margin-bottom: 10px'></InputNumber> -->
                    	</div>
                    </FormItem>
                     <FormItem label='名称'>
	                    <Input v-model='changeIndex.name' placeholder=''></Input>
                    </FormItem>
                </Form>
            </div>
            <div slot="footer">
                <button class='btn-cancel' @click="cancel">取消</button>
                <button class='btn-sure' @click="index_sure">确认</button>
            </div>
        </Modal>
	</div>
</template>
<script type="text/javascript">
	export default{
		data(){
			return{
				modal:false,
				columnData:{},
				columnConfig:{},
				currentTable:'',
				btnsIndex:1,
				isEdit:false,
				tabShow:'1',
                
                editTableData: [],
                editDataConfig:[],
                //显示结构
                showTableList: [
                    {
                        title: '字段',
                        key: 'Field',
                    },
                    {
                        title: '类型',
                        key: 'Type',
                    },
                    {
                        title: '排序规则',
                        key: 'Collation'
                    },
                    {
                        title: '空',
                        key: 'Null',
                        render:(h,params)=>{
                        	return h('div',[
                        			h('span',params.row.Null == "NO" ? "否" : "是")
                        		])
                        }
                    },
                    {
                        title: '默认',
                        key: 'Default'
                    },
                    {
                        title: '注释',
                        key: 'Comment'
                    },
                    {
                        title: '额外',
                        key: 'Extra'
                    },
                    {
                        title: '操作',
                        key: 'action',
                        width:160,
                        render: (h, params) => {
                        	let arr = ['id','created_at','updated_at','deleted_at']
                        	if(arr.indexOf(params.row.Field)<0){
                        		params.row.status = true;
                        	}else{
                        		params.row.status = false;
                        	}
                            return h('div', [
                                h('span', {
                                    style: {
                                        color:'#06A0FD',
                                        cursor:'pointer',
                                        marginRight:'8px'
                                    },
                                    on: {
                                        click: () => {
                                            this.editColumn(params.row)
                                        }
                                    }
                                }, params.row.status?'修改':''),
                                h('span', {
                                    style: {
                                        color:'#06A0FD',
                                        cursor:'pointer',
                                        marginRight:'8px'
                                    },
                                    on: {
                                        click: () => {
                                            this.delColumn(params.row)
                                        }
                                    }
                                }, params.row.status?'删除':''),
                                h('span', {
                                    style: {
                                        color:'#06A0FD',
                                        cursor:'pointer'
                                    },
                                    on: {
                                        click: () => {
                                            this.indexColumn(params.row)
                                        }
                                    }
                                }, params.row.status?'索引':'')
                            ]);
                        }
                    },
                ],
                showTableData: [],
                isAddField:false,
                //索引
                showIndexList:[
                	{
                        title: '索引类型',
                        key: 'type',
                    },
                	{
                        title: '名称',
                        key: 'name',
                    },
                    {
                    	title:'列(长度)',
                    	key:'columns',
                    	render:(h,params)=>{
                    		return h('div',
                    			params.row.sub.map(item => {
                    				if(item.lengths){
                    					return h('span',item.Column_name +'(' + item.lengths +') ')
                    				}else{
                    					return h('span',item.Column_name + ' ')
                    				}
                                    
                                })
                            )
                    	}
                    },
                	// {
                 //        title: '键名',
                 //        key: 'Key_name',
                 //    },
                	// {
                 //        title: '类型',
                 //        key: 'Index_type',
                 //    },
                 //    {
                 //        title: '唯一',
                 //        key: 'Non_unique',
                 //        render:(h,params)=>{
                 //        	return h('span',params.row.Non_unique ? "否" : "是")
                 //        }
                 //    },
                	// {
                 //        title: '紧凑',
                 //        key: 'packed',
                 //        render:(h,params)=>{
                 //        	return h('span',params.row.packed ? '是' : '否')
                 //        }
                 //    },
                 //    {
                 //        title: '字段',
                 //        key: 'Column_name',
                 //    },
                 //     {
                 //        title: '基数',
                 //        key: 'Cardinality',
                 //    },
                 //     {
                 //        title: '排序规则',
                 //        key: 'Collation',
                 //    },
                 //     {
                 //        title: '空',
                 //        key: 'Null',
                 //        render:(h,params)=>{
                 //        	return h('span',params.row.Null == 'YES' ? '是' : '否')
                 //        }
                 //    },
                 //     {
                 //        title: '注释',
                 //        key: 'Index_comment',
                 //    },
                    {
                        title: '操作',
                        key: 'action',
                        render: (h, params) => {
                            return h('div', [
                            	h('span', {
                                    style: {
                                        color:'#06A0FD',
                                        cursor:'pointer',
                                        marginRight:'10px'
                                    },
                                    on: {
                                        click: () => {
                                            this.editIndex(params.row)
                                        }
                                    }
                                }, '编辑'),
                                h('span', {
                                    style: {
                                        color:'#06A0FD',
                                        cursor:'pointer'
                                    },
                                    on: {
                                        click: () => {
                                            this.delIndex(params.row)
                                        }
                                    }
                                }, '删除')
                               
                            ]);
                        }
                    },
                ],
                showIndexData:[],
                //修改索引
                index_modal:false,
                changeIndex:{},
                changeIndexSub:[],
                
                //新建数据
                newcolumns: [
                    {
                        title: 'name',
                        key: 'column_name',
                        width:200
                    },
                    {
                        title: 'type',
                        key: 'column_type',
                        width:200
                    },
                    {
                        title: 'value',
                        key: 'column_name',
        					render:(h,params)=>{
        						if(params.row.column_name == 'created_at' || params.row.column_name == 'updated_at' || params.row.column_name == 'deleted_at'){
	                        		params.row.canWrite = true;
	                        	}

	                        	if(params.row.column_input == 'string'){
	                        		params.row.inputType = false;
	                        	}else{
	                        		params.row.inputType = true;
	                        	}

        						let optionArr = [];
        						let groupArr = [];
        						this.newDataConfig.forEach((val,index)=>{
        							val.sub.forEach((e,i)=>{
        								groupArr.push(h('i-option',{
        									props:{
        										value:e.fn_value
        									},
        									attrs:{
        										title:e.describe
        									}
        								}))
        							});
        							optionArr.push(h('Option-group',{
        								props:{
        									label:val.name
        								}
        							},groupArr))
        						})
        						
        						optionArr.unshift(h('i-option',{
        							props:{
        								value:''
        							}
        						},'请选择'))

        						return h('div',{
        							style:{
        								display:'flex',
        								padding:'20px'
        							}
        						},[
        							h('i-select',{
        								'class':{
        									'data-select':true,
        									'data-select-fun':true,
        								},
        								style:{
        									marginRight:'16px',
        									textAlign:'left',
        									width:'220px'
        								},
        								on:{
        									'on-change':(value)=>{
        										this.newSelect(value,params.row)
        									}
        								}
        							},optionArr,params.row.column_function),
        							h('i-input',{
        								style:{
        									width:'300px'
        								},
        								'class':{
        									'ivu-input28':params.row.inputType,
        									'ivu-textarea':!params.row.inputType
        								},
        								props:{
        									readonly:params.row.canWrite,
        									placeholder:params.row.canWrite ? 'NULL' : '',
        									value:params.row.column_value,
        									type:params.row.inputType?'text':'textarea',
        									row:5
        								},
        								on:{
        									'on-blur':(event)=>{
        										params.row.column_value = event.target.value;
        										this.newValue(params.row)
        									}
        								}
        							},params.row.column_value)
        						])
        					}

                    },
                ],
                newdata:[],
                newDataConfig:[],
                // 修改表
        //         changeTableList:[
        //         	{
        //                 title: '字段名',
        //                 key: 'COLUMN_NAME',
        //                 render(row){
        //                 	return `<Input v-model='row.COLUMN_NAME' class='input-height30'></Input>`;
        //                 }
        //             },
        //             {
        //                 title: '类型',
        //                 key: 'DATA_TYPE',
        //                 render(row){
				    //         return `
								// <i-select v-model="row.DATA_TYPE" class='data-select' style='margin-right:16px;text-align:left'>
		      //                       <Option-group :label="item.name" v-for='item in tableConfigData.types' :key='item.name'>
		      //                           <i-option v-for="sub in item.sub" :value="sub" :key="sub">{{ sub }}</i-option>
		      //                       </Option-group>
		      //                   </i-select>
				    //         `;
        //                 }
        //             },
        //             {
        //                 title: '长度',
        //                 key: 'DATA_LENGTH',
        //                 render(row){
        //                 	return `<Input v-model='row.DATA_LENGTH' class='input-height30'></Input>`;
        //                 }

        //             },
        //             {
        //                 title: '选项',
        //                 key: 'address',
        //                 render(row){
        //                 	return `
        //                 	<i-select v-model="row.DATA_TYPE" class='data-select' style='margin-right:16px;text-align:left'>
	       //                      <Option-group :label="item.name" v-for='item in tableConfigData.types' :key='item.name'>
	       //                          <i-option v-for="sub in item.sub" :value="sub" :key="sub">{{ sub }}</i-option>
	       //                      </Option-group>
	       //                  </i-select>
				    //         `;
        //                 }
        //             },
        //             {
        //                 title: 'NULL',
        //                 key: 'IS_NULLABLE',
        //                 width:80,
        //                 render(row){
        //                 	row.IS_NULLABLE = row.IS_NULLABLE == 'YES' ? true : false;
        //                 	return `<Checkbox v-model='row.IS_NULLABLE'></Checkbox>`;
        //                 }
        //             },
        //             {
        //                 title: 'AI',
        //                 key: 'EXTRA',
        //                 width:80,
        //                 render(row){
        //                 	row.EXTRA = row.EXTRA ? true : false;
        //                 	return `<Radio v-model='row.EXTRA' @on-change='isAI(row)'></Radio>`;
                        	
        //                 }
        //             },
        //             {
        //                 title: 'default value',
        //                 key: 'COLUMN_DEFAULT',
        //                 render(row){
        //                 	return `<Input v-model='row.COLUMN_DEFAULT' class='input-height30'></Input>`;
        //                 }
        //             },
        //             {
        //                 title: '注释',
        //                 key: 'COLUMN_COMMENT',
        //                 render(row){
        //                 	return `<Input v-model='row.COLUMN_COMMENT' class='input-height30'></Input>`;
        //                 }
        //             },
        //             {
        //                 title: '+',
        //                 key: 'address',
        //                 width:160,
        //                 render(row){
        //                 	return `
        //                 	<div style='display:flex'>
        //                 		<div class='change-pos' @click='plusData(row)'>
								// 	<Icon type="plus-round" size='18' color='#fff'></Icon>
	       //                  	</div>
	       //                  	<div class='change-pos' @click='arrowUp(row)'>
								// 	<Icon type="arrow-up-c" size='18' color='#fff'></Icon>
	       //                  	</div>
	       //                  	<div class='change-pos' @click='arrowDown(row)'>
								// 	<Icon type="arrow-down-c" size='18' color='#fff'></Icon>
	       //                  	</div>
	       //                  	<div class='change-pos' @click='delData(row)'>
								// 	<Icon type="close-round" size='16' color='#fff'></Icon>
	       //                  	</div>
        //                 	</div>
        //                 	`;
        //                 },
        //                 renderHeader: (column, index) => {
			     //            return `
			     //            <div style='width:24px;height:24px;background:rgba(6, 160, 253,0.8);cursor:pointer;text-align:center' >
								// <span style='font-size:16px;color:#fff'>+</span>
			     //            </div>`
			     //        }
        //             },
        //         ],
                changeTableData:[],
                changeTableDataArr:[],
                auto_increment:'',//自动增量
                is_default:0,
                is_comment:0,
                //搜索
                searchConfigData:{},
                searchOptions:{
                	select:[
	                	{
	                		func:'',
	                		column:''
	                	}
	                ],
	                where:[
	                	{
	                		column:'',
	                		func:'=',
	                		value:'',
	                		// icon:''
	                	}
	                ],
	                order:[
	                	{
	                		column:'',
	                		desc:''
	                	}
	                ],
	                limit:'',
                },
                //修改表
                tableConfigData:{},
                formItem:{
                	table:'',
                	engine:'',
                	collation:''
                },
                //选择数据表格
				selectTableList: [
					{
						type:'selection',
						width:70
					}
                ],
                selectTableData: [],
                selectTablePage:{},
                selection:[],
                showHeader:false,
                isEditdata:false
			}
		},
		created(){
			// this.$bus.emit('updateMainMenuActive',this.$route.fullPath);
			this.$bus.on('select_table',this.selectTable)
			//当前数据表
			this.currentTable = this.$route.query.name;
			if(this.currentTable){
				this.searchOption();
				this.getTableData();
			}

		},
		destroyed() {
		  	this.$bus.off('select_table', this.selectTable);
		},
		methods:{
			selectTable(res){
				this.searchOptions.where = [{
					column:'',
            		func:'=',
            		value:''
				}]
				this.btnsIndex = 1;		// 切换表的时候回到选择按钮
				this.tabShow = '1';		// 切换表的时候回到选择数据Tab
				this.currentTable = res.name;
				this.searchOption();
				this.getTableData();
			},
			//返回数据表
			tables(){
				this.$bus.emit('updateMainMenuActive','/home/data/table')
			},
			searchOption(){
				//搜索条件
	            this.fetch('/home/app/data/select/table/'+this.currentTable).then(res=>{
	                if(res&&res.data.data&&res.data.code){
	                	this.searchConfigData = res.data.data;

	                }
	            })
			},
			selectArr(select){
				for(let key in this.searchOptions.select){
					if(!this.searchOptions.select[key].func && !this.searchOptions.select[key].column){
						return;
					}
				}
				this.searchOptions.select.push(
					{
                		func:'',
                		column:''
                	})
			},
			whereArr(select){
				for(let key in this.searchOptions.where){
					if(!this.searchOptions.where[key].value && !this.searchOptions.where[key].column){
						return;
					}
				}
				this.searchOptions.where.push(
                	{
                		column:'',
                		func:'=',
                		value:'',
                		// icon:''
                	}
                )
				
			},
			showCloseicon(item){
				if(item.value){
					item.icon = 'ios-close-outline'
				}
			},
			//失去焦点
			hideCloseicon(item){
				item.icon = '';
				for(let key in this.searchOptions.where){
					if(!this.searchOptions.where[key].value){
						return
					}
				}
				this.searchOptions.where.push(
                	{
                		column:'',
                		func:'=',
                		value:'',
                		// icon:''
                	}
                )
			},
			clickCloseicon(index){

				this.searchOptions.where[index].value = '';
			},
			orderArr(name){
				if(name){
					for(let key in this.searchOptions.order){
						if(!this.searchOptions.order[key].column){
							return
						}
					}
					this.searchOptions.order.push(
						{
	                		column:'',
	                		desc:0
	                	}
					)
				}
				
			},
			orderDesc(item){
				let desc = item.desc == 0 ? 1 : 0;
				item.desc = desc;
			},
			
			//获取数据表数据
			getTableData(){
				this.fetch('/home/app/data/select/table/'+this.currentTable,{}).then(res=>{
                    if(res&&res.data.data&&res.data.code){
                        this.selectTableData = res.data.data.data;
                    	this.selectTableData.forEach(val => {
                    		if(!val.created_at){
                    			val.created_at = 'NULL';
                    		}
                    		if(!val.deleted_at){
                    			val.deleted_at = 'NULL';
                    		}
                    		if(!val.updated_at){
                    			val.updated_at = 'NULL';
                    		}
                    	})
                        this.selectTablePage = res.data.data.pagination;
                        this.searchOptions.limit = this.selectTablePage.pageSize;
                        let fieldsList = res.data.data.fields;
                        this.dataColumnList(fieldsList);
                    }
                })
			},
			//分页
			selectTablePagination(page){
				this.searchOptions.page = page;
				this.fetch('/home/app/data/select/table/'+this.currentTable,this.searchOptions).then(res=>{
                    if(res&&res.data.data&&res.data.code){
                        this.selectTableData = res.data.data.data;
                        this.selectTableData.forEach(val => {
                    		if(!val.created_at){
                    			val.created_at = 'NULL';
                    		}
                    		if(!val.deleted_at){
                    			val.deleted_at = 'NULL';
                    		}
                    		if(!val.updated_at){
                    			val.updated_at = 'NULL';
                    		}
                    	})
                        this.selectTablePage = res.data.data.pagination;
                        this.searchOptions.limit = this.selectTablePage.pageSize;

                        let fieldsList = res.data.data.fields;
	                	//数据表格头
	                	this.dataColumnList(fieldsList);
                    }
                })
			},
			//选择
			selectBtn(){
				this.searchOptions.page = 1;
				if(!this.searchOptions.limit || !Number(this.searchOptions.limit)){
					this.searchOptions.limit = 50;
				}
				this.fetch('/home/app/data/select/table/'+this.currentTable,this.searchOptions).then(res=>{
					if(res&&res.data.data&&res.data.code){
						this.selectTableData = res.data.data.data;
						this.selectTableData.forEach(val => {
                    		if(!val.created_at){
                    			val.created_at = 'NULL';
                    		}
                    		if(!val.deleted_at){
                    			val.deleted_at = 'NULL';
                    		}
                    		if(!val.updated_at){
                    			val.updated_at = 'NULL';
                    		}
                    	})
                        this.selectTablePage = res.data.data.pagination;
                        this.selectTablePage.pageSize = res.data.data.pagination.pageSize-0;
                        this.searchOptions.limit = this.selectTablePage.pageSize;

                        let fieldsList = res.data.data.fields;
                        this.dataColumnList(fieldsList);
					}
				})
			},
			//选择数据数据表格头
			dataColumnList(fieldsList){

				if(fieldsList.length){
                	this.showHeader = true;
                	//数据表格头
                	this.selectTableList = [{type:'selection',width:70}];
                	let arr = ['created_at','updated_at','deleted_at']
                	let action = false;
                    for(let key in fieldsList){
                    	if(fieldsList[key] == 'id'){
                    		action = true;
                    		this.selectTableList.push({title:fieldsList[key],key:fieldsList[key],width:75})
                    	}else if(arr.indexOf(fieldsList[key])!=-1){
                    		this.selectTableList.push({title:fieldsList[key],key:fieldsList[key],width:160})
                    	}else{
                    		this.selectTableList.push({
                    			title:fieldsList[key],
                    			key:fieldsList[key],
                    			width:200,
                    			render: (h, params) => {
                    				if(!params.row[fieldsList[key]]){
                    					return h('span',params.row[fieldsList[key]])
                    				}else{
                    					return h('Poptip', {
			                                props: {
			                                    trigger: 'hover',
			                                    placement: 'bottom'
			                                }
			                            }, [
			                                h('span', params.row[fieldsList[key]]),
			                                h('div', {
			                                    slot: 'content'
			                                }, [
			                                    h('p', params.row[fieldsList[key]])
			                                ])
			                            ]);
                    				}
		                        }

                			})
                    	}
                    	
                    }

                    if(action){
                    	this.selectTableList.splice(1,0,{
	                        title: 'Modify',
	                        key: 'action',
	                        width:100,
	                        render: (h, params) => {
	                            return h('div', [
	                                h('span', {
	                                    style: {
	                                        color:'#06A0FD',
	                                        cursor:'pointer',
	                                        marginRight:'8px'
	                                    },
	                                    on: {
	                                        click: () => {
	                                            this.editData1(params.row)
	                                        }
	                                    }
	                                }, '编辑'),
	                                h('span', {
	                                    style: {
	                                        color:'#06A0FD',
	                                        cursor:'pointer'
	                                    },
	                                    on: {
	                                        click: () => {
	                                            this.deleteData1(params.row)
	                                        }
	                                    }
	                                }, '删除')
	                            ]);
	                        }
	                    })
                    }

                }else{
                	this.showHeader = false;
                }
			},
			btnSelect(type){
				this.btnsIndex = type;
			},
			
			changeTab(name){
				this.tabShow = name;
				// if(name!=1){
				// 	this.isEdit = false;
				// }
				if(name == 1){
					this.isEditdata = false;
					this.selection = [] 
					
					this.searchOptions={
	                	table_name:'',
	                	select:[
		                	{
		                		func:'',
		                		column:''
		                	}
		                ],
		                where:[
		                	{
		                		column:'',
		                		func:'=',
		                		value:'',
		                		// icon:''
		                	}
		                ],
		                order:[
		                	{
		                		column:'',
		                		desc:''
		                	}
		                ],
		                limit:this.selectTablePage.pageSize,
	                }
	                this.btnsIndex = 1;
	                this.getTableData();
				}
				//显示结构
				if(name == 2){
					this.getStructure()
					this.isEditdata = false;

				}
				//修改表
				// if(name == 3){
					// this.fetch('/home/app/data/table/create?table_name='+this.currentTable).then(res=>{
					// 	if(res&&res.data.code&&res.data.data){
					// 		let data = res.data.data;
					// 		this.tableConfigData = data;
					// 		this.formItem.table_name = this.currentTable;
					// 		this.formItem.engine = data.engines;
					// 		this.formItem.collate = data.collates;

					// 		this.changeTableData = data.data.fields;
					// 		this.auto_increment = data.data.AUTO_INCREMENT;
					// 		this.is_default = data.data.is_default;
					// 		this.is_comment = data.data.is_comment;
					// 		for(let key in this.changeTableData){
					// 			this.changeTableData[key].IS_NULLABLE == 'YES' ? true : false;
					// 		}
					// 	}
					// })
				// }
				//新建数据
				if(name == 4){
					this.selection = []
					this.getNewdata();
					
				}
				
			},
			getStructure(){
				this.fetch('/home/app/data/structure/table/'+this.currentTable).then(res=>{
					if(res&&res.data.code&&res.data.data){
						this.showTableData = res.data.data.fields;
					}
				})
				//索引列表
				this.getIndexList();

			},
			//索引列表
			getIndexList(){
				this.fetch('/home/app/data/indexes/table/'+this.currentTable).then(res=>{
					if(res&&res.data.code&&res.data.data){
						this.showIndexData = res.data.data;
					}
				})
			},
			//显示结构修改字段
			editColumn(row){
				this.modal = true;
				this.isAddField = false;
				this.getFieldData(row);
				this.getColumnInfo();
			},
			//获取字段信息
			getColumnInfo(){
				this.fetch('/home/app/data/table/'+this.currentTable+'/info/column').then(res=>{
					if(res&&res.data.data&&res.data.code){
						this.columnConfig = res.data.data;
					}
				})
			},
			getFieldData(row){
				this.fetch('/home/app/data/table/'+this.currentTable+'/column/'+row.Field).then(res=>{
					if(res&&res.data.data&&res.data.code){
						this.columnData = res.data.data;
						this.columnData.old_field = res.data.data.Field;
						this.columnData.Null = this.columnData.Null == 'NO' ? false : true;
					}
				})
			},
			sure(){
				if(!this.columnData.after && this.isAddField){
					for(let key in this.showTableData){
						if(this.showTableData[key].Field == 'created_at'){
							this.columnData.after = this.showTableData[key - 1].Field
						}
					}
				}
				if(!this.columnData.Field){
					this.$Message.warning('请填写字段')
					return
				}
				if(!this.columnData.Type_index){
					this.$Message.warning('请选择类型')
					return
				}
				let Null = this.columnData.Null ? 1 : 0;

				this.fetch('/home/app/data/table/'+this.currentTable+'/add/column',{
						old_field:this.columnData.old_field,
						new_field:this.columnData.Field||'',
						type:this.columnData.Type_index,
						length:this.columnData.Type_length||'',
						null:Null,
						collate:this.columnData.Collation||'',
						default:this.columnData.Default||'',
						comment:this.columnData.Comment||'',
						after:this.columnData.after||''
					}).then(res=>{
					if(res&&res.data.data&&res.data.code){
						this.modal = false;
						this.getStructure()
						
					}
				})
			},
			cancel(){
				this.modal = false;
				this.index_modal = false;
			},
			//添加字段
			addField(){
				this.isAddField = true;
				this.modal = true;
				this.columnData = {
					old_field:'',
					new_field:'',
					type:'',
					length:'',
					null:0,
					collate:'',
					default:'',
					comment:'',
					after:''
				}
				this.getColumnInfo();
			},
			//删除字段
			delColumn(row){

				this.$Modal.confirm({
                    title: '提示',
                    content: '<p>确定删除吗</p>',
                    onOk: () => {
                        this.fetch('/home/app/data/table/'+this.currentTable+'/del/column/'+row.Field).then(res=>{
                            if(res&&res.data.data&&res.data.code){
                                this.$Message.success('删除成功')
                                this.getStructure()
                            }
                        })
                    }
                });
			},
			//添加索引
			indexColumn(row){
				let content = row.Field;
				this.$Modal.confirm({
                    title: '提示',
                    content: '<p>确定添加索引'+content +'吗?</p>',
                    onOk: () => {
                        this.fetch('/home/app/data/table/'+this.currentTable+'/add/indexes/'+row.Field).then(res=>{
                            if(res&&res.data.data&&res.data.code){
                                this.getStructure()
                            }else{
                            	this.$Message.warning(res.data.msg)
                            }
                        })
                    }
                });
			},
			//编辑索引
			editIndex(row){
				this.index_modal = true;
				this.changeIndex.type = row.type;
				this.changeIndex.name = row.name;
				this.changeIndexSub = [];
				for(let key in row.sub){
					this.changeIndexSub.push({name:row.sub[key].Column_name,length:row.sub[key].lengths})
				}
				this.changeIndexSub.push({
					name:'',
					length:''
				})
			},
			//选择列长度
			selectIndexType(column){
				for(let key in this.changeIndexSub){
					if(!this.changeIndexSub[key].name && !this.changeIndexSub[key].length){
						return
					}
				}
				if(column){
					this.changeIndexSub.push({
						name:'',
						length:''
					})
				}

			},
			index_sure(){
				let sub = [];
				for(let i = 0;i< this.changeIndexSub.length-1; i++){
					if(this.changeIndexSub[i].name || this.changeIndexSub[i].length){
						sub.push({
							name:this.changeIndexSub[i].name || '',
							length:this.changeIndexSub[i].length || ''
						})
					}
					
				}
				this.fetch('/home/app/data/table/'+this.currentTable+'/add/indexes',{
					type:this.changeIndex.type,
					name:this.changeIndex.name,
					sub:sub
				}).then(res=>{
					if(res&&res.data.data){
						this.index_modal = false;
						this.getIndexList();
					}
				})
			},
			//删除索引
			delIndex(row){
				this.$Modal.confirm({
                    title: '提示',
                    content: `<p>确定删除索引吗</p>`,
                    onOk: () => {
                        this.fetch('/home/app/data/table/'+this.currentTable+'/del/indexes/'+row.name).then(res=>{
                            if(res&&res.data.data&&res.data.code){
                                this.$Message.success('删除成功')
                                this.getIndexList();
                            }else{
                            	this.$Message.warning(res.data.msg)
                            }
                        })
                    }
                });
			},

			//修改表名信息
			// changeTableName(){
				
			// 	this.fetch('/home/app/data/table/create',{
			// 		table_name:this.formItem.table_name,
			// 		engine:this.formItem.engine == 0 ? '' : this.formItem.engine,
			// 		collate:this.formItem.collate == 0 ? '' : this.formItem.collate
			// 	}).then(res=>{
			// 			if(res&&res.data.code&&res.data.data){
			// 				this.$Message.success('修改成功')
			// 			}
			// 		})
			// },
			//修改表自动增量
			// isAI(row){
			// 	this.changeTableData[row._index].EXTRA = 'auto_increment';
			// 	for(let key in this.changeTableData){
			// 		if(key!=row._index){
			// 			this.changeTableData[key].EXTRA = '';
			// 		}
			// 	}
			// },
			//添加一条数据
			// plusData(row){
			// 	console.log(row)
			// 	this.changeTableData.splice(row._index+1,0,{
			// 		COLUMN_NAME:'',
			// 		DATA_TYPE:row.DATA_TYPE,
			// 		DATA_LENGTH:row.DATA_LENGTH,

			// 		IS_NULLABLE:row.IS_NULLABLE,

			// 	})
			// },
			//上移
			// arrowUp(row){
			// 	if(row._index){
			//         var temp = this.changeTableData[row._index];
			//         this.changeTableData[row._index] = this.changeTableData[row._index-1];
			//         this.changeTableData[row._index-1] = temp;
			// 	}
			// },
			//下移
			// arrowDown(row){

			// },
			// //删除
			// delData(row){
			// 	this.changeTableData.splice(row._index,1)
			// },
			// //默认值
			// isDefault(){
			// 	this.is_default = !this.is_default;
			// 	if(!this.is_default){
			// 		for(let key in this.changeTableList){
			// 			if(this.changeTableList[key].key == 'COLUMN_DEFAULT'){
			// 				this.changeTableList.splice(key,1)
			// 			}
			// 		}
			// 	}else{

			// 		this.changeTableList.splice(6,0,{
   //                      title: 'default value',
   //                      key: 'COLUMN_DEFAULT',
   //                      render(row){
   //                      	return `<Input v-model='row.COLUMN_DEFAULT' class='input-height30'></Input>`;
   //                      }
   //                  })
			// 	}
			// },
			// //注释
			// isComment(){
			// 	this.is_comment = !this.is_comment;
			// 	if(!this.is_comment){
			// 		for(let key in this.changeTableList){
			// 			if(this.changeTableList[key].key == 'COLUMN_COMMENT'){
			// 				this.changeTableList.splice(key,1)
			// 			}
			// 		}
			// 	}else{
			// 		let index = 6;
			// 		if(this.is_default){
			// 			index = 7;
			// 		}
			// 		this.changeTableList.splice(index,0,{
   //                      title: '注释',
   //                      key: 'COLUMN_COMMENT',
   //                      render(row){
   //                      	return `<Input v-model='row.COLUMN_COMMENT' class='input-height30'></Input>`;
   //                      }
   //                  })
			// 	}
			// },

			//新建数据
			getNewdata(){
				this.fetch('/home/app/data/table/'+this.currentTable+'/info/data').then(res=>{
					if(res&&res.data.data&&res.data.code){
						this.newDataConfig = res.data.data.functions;
						this.newdata = res.data.data.data;
					}
				})
			},
			//选择数据编辑
			selectDataEdit(selection){
				this.selection = selection;
			},
			//编辑
			editData(){
				if(!this.selection.length){
					this.$Message.warning('请选择要修改的数据')
					return;
				}
				for(let key in this.selection){
					if(!this.selection[key].id){
						this.$Message.warning('该数据不能编辑')
						return
					}
				}
				
				this.tabShow = '4';
				this.isEditdata = true;
				this.getNewdata();
			},
			editData1(row){
				if(!row.id){
					this.$Message.warning('该数据不能编辑')
					return
				}
				this.selection = []
				this.selection.push(row)
				this.tabShow = '4';
				this.isEditdata = true;
				this.fetch('/home/app/data/table/'+this.currentTable+'/data/'+row.id).then(res=>{
					if(res&&res.data.data&&res.data.code){
						this.newDataConfig = res.data.data.functions;
						this.newdata = res.data.data.data;
					}
				})
			},
			editSelect(row){
				this.editTableData[row._index] = row;
			},
			editValue(row){
				this.editTableData[row._index] = row;
			},
			
			//新数据保存
			newdataSave(type){
				let ids = []
				if(this.selection.length){
					for(let key in this.selection){
						ids.push(this.selection[key].id)
					}
					
				}
				let data = [];
				for(let key in this.newdata){
					data.push({
						column_name:this.newdata[key].column_name,
						column_value:this.newdata[key].column_value,
						column_function:this.newdata[key].column_function || '',

					})
				}
				this.fetch('/home/app/data/table/'+this.currentTable+'/add/data',{
					ids:this.selection.length ? ids.join() : '',
					data:data
				}).then(res=>{
					if(res&&res.data.data){
						this.$Message.success('保存成功')
						if(type==1){
							this.tabShow = '1';
							this.selection = []
						}else{
							if(!this.selection.length){
								for(let key in this.newdata){
									this.newdata[key].column_value = '';
									this.newdata[key].column_function = '';
								}
							}
							
						}
						this.getTableData();
					}
				})
			},
			newSelect(value,row){
				this.newdata[row._index].column_function = value;
			},
			newValue(row){
				this.newdata[row._index] = row;
			},
			//删除数据
			deleteData(){
				if(!this.selection.length){
					this.$Message.warning('请选择要删除的数据')
					return;
				}
				for(let key in this.selection){
					if(!this.selection[key].id){
						this.$Message.warning('该数据不能删除')
						return
					}
				}
				let ids = []
				if(this.selection.length){
					for(let key in this.selection){
						ids.push(this.selection[key].id)
					}
					
				}
				this.$Modal.confirm({
                    title: '提示',
                    content: `<p>确定删除该数据吗</p>`,
                    onOk: () => {
                        this.fetch('/home/app/data/table/'+this.currentTable+'/del/data/'+ids.join()).then(res=>{
                            if(res&&res.data.code){
                                this.$Message.success('删除成功')
                                this.selection = [];
                                this.getTableData()
                            }
                        })
                    }
                });

			},
			deleteData1(row){
				this.$Modal.confirm({
                    title: '提示',
                    content: `<p>确定删除该数据吗</p>`,
                    onOk: () => {
                        this.fetch('/home/app/data/table/'+this.currentTable+'/del/data/'+row.id).then(res=>{
                            if(res&&res.data.code){
                                this.$Message.success('删除成功')
                                this.getTableData()
                            }
                        })
                    }
                });

			}

		}
	}
</script>
<style scoped>
	.btn-edit{
		width:80px;
		height:30px;
		line-height: 30px;
		font-size:14px;
		margin-right: 16px;
		border-radius: 3px;
		background-color: #06A0FD;
		border:1px solid #06A0FD;
		color:#fff;
	}
	.btn-del{
		width:80px;
		height:30px;
		font-size:14px;
		line-height: 30px;
		border-radius: 3px;
		border:1px solid #06A0FD;
		color:#06A0FD;
		background-color: #f2f7fb;
	}
	.btns-wrap{
		display:flex;
		background-color:#f2f7fb;
		border-radius:16px;
		margin-right: 22px;
		width:240px;
		height:32px
	}
	.btns{
		width:80px;
		height:32px;
		line-height:32px;
		font-size:14px;
		text-align: center;
		color:#464C5B;
		border-radius: 16px;
		cursor:pointer;
	}
	.btns-selected{
		background-color:#06A0FD;
		color:#fff
	}
	.btn1-select{
		width:110px;
		height:28px;
		line-height:28px;
		font-size:14px;
		color:#464C5B;
		border:1px solid #D7DDE4;
		border-radius:3px;
		padding:0 12px;
	}
	.data-checkbox{
		width:18px;
		height:18px;
		border:1px solid #D7DDE4;
		border-radius: 3px;
		position: relative;
		cursor: pointer;
		float: left;
		margin-top: 5px;
		margin-right: 10px;
	}
	.data-checkbox-select{
		background: #06A0FD;
		border-color: #06A0FD;
	}
	.table-td{
		border-bottom:1px solid #E3E8EE;
	}
	
	/*修改表*/
	.tab3-select{
		width:160px;
		height:30px;
		line-height:30px;
		border:1px solid #D7DDE4;
		border-radius:3px;
		font-size:12px;
	}
</style>
<style type="text/css">
	.ivu-table-fixed-right:before, .ivu-table-fixed:before{
		height: 0!important
	}
	#select-table .ivu-table-header th{
		background: #fff!important;
	}
	#select-table .ivu-table:after{
		width:0!important;
	}
	#diy-table .ivu-table,#diy-table .ivu-table td{
		background: #F2F7FB!important;
	}
	#showTable .ivu-table-header th{
		background: #F2F7FB!important;
	}
	#editTable .ivu-table-body td{
		background: #F2F7FB!important;
	}
	.change-pos{
		width:24px;
		height:24px;
		background:rgba(6, 160, 253,0.8);
		border-radius:12px;
		padding:3px;
		margin-right: 6px;
		cursor:pointer;
	}
	.data-input .ivu-input{
		width:130px!important;
		height:28px!important;
	}
	.data-change-input .ivu-input{
		width:160px!important;
	}
	.input-height30{
		width:100px;
		height:30px;
		border:1px solid #E3E8EE;
		border-radius:3px;
		padding:0 5px;
		color:#657180
	}
	.input-auto-increment{
		width:120px!important;
	}
	.input-auto-increment .ivu-input{
		width:120px!important;
		height:28px!important;
		line-height:28px!important;
	}
    .fn-table-wrap table{
        width: 100% !important;
    }
    .fn-table-wrap table tr{
        width: 100%;
    }
    .fn-table-wrap .ivu-table-cell>span{
    	display: inline-block;
    	width: 100%;
    	white-space: nowrap;
    	overflow:hidden;
    	text-overflow: ellipsis;
    }
    .ivu-poptip-inner{
		white-space:normal!important;
		max-width:300px!important;
    }
    .ivu-poptip-body{
    	padding:16px!important;
    }
    .ivu-poptip, .ivu-poptip-rel {
	    overflow: hidden;
	    text-overflow: ellipsis;
	    white-space: nowrap;
	    word-break: break-all;
	    box-sizing: border-box;
	    width: 100%;
	}
	.ivu-textarea textarea.ivu-input{
		height: 100px!important;
	}

</style>


